<template>
    <screenDialog :dialogVisible="dialogVisible" title="出图" @close="emits('changeFlag') ">
    <div class="box">
      <darkInput v-model="formdata.title" placeholder="请输入标题" title="标题" />
      <darkInput v-model="formdata.unit" placeholder="请输入单位" title="单位" />
      <el-button type="primary" @click="captureScreen" style="height: 35px;"> 出图 </el-button>
    </div>
  </screenDialog>
</template>  
    
  <script setup>
import { ref, defineProps, defineEmits, watch,reactive } from 'vue'
import darkInput from '../../../components/darkInput.vue';
import screenDialog from '../../../components/screenDialog.vue';
import { ElMessage } from 'element-plus'

// eslint-disable-next-line vue/require-prop-types
const props = defineProps(["dialogVisible"])
const emits = defineEmits(['changeFlag'])


// const dialogVisible = ref(true);
const canvasData = ref(null);

const formdata = reactive({
  title: '',
  unit: ''
})
const captureScreen = async () => {
  if(formdata.title == ""){
    ElMessage({
    message: '请输入标题',
    type: 'warning',
  })
  return
  }
  if(formdata.unit == ""){
    ElMessage({
    message: '请输入单位',
    type: 'warning',
  })
  return
  }

  let originalCanvas = map.getViewport().querySelector('canvas');  
  let originalWidth = originalCanvas.width;  
  let originalHeight = originalCanvas.height;  
  
  // 设置画布留白和边框参数  
  let topPadding = 50;  
  let leftPadding = 20;  
  let rightPadding = 20;  
  let bottomPadding = 30;  
  let outerBorderWidth = 2;  
  let innerBorderWidth = 0; // 内边框宽度（如果需要内边框有颜色或样式，可以设置为非零值）  
  let innerPadding = 10; // 内边框与外边框之间的留白  
  
  // 计算新画布的总高度和宽度  
  let newCanvasWidth = originalWidth + leftPadding + rightPadding + 2 * (outerBorderWidth + innerPadding);  
  let newCanvasHeight = originalHeight + topPadding + bottomPadding + 2 * (outerBorderWidth + innerPadding);  
  
  // 创建一个新画布  
  let newCanvas = document.createElement('canvas');  
  newCanvas.width = newCanvasWidth;  
  newCanvas.height = newCanvasHeight;  
  let newContext = newCanvas.getContext('2d');  
  
  // 用白色填充新画布的整个背景  
  newContext.fillStyle = 'white';  
  newContext.fillRect(0, 0, newCanvasWidth, newCanvasHeight);  
  
  // 绘制外边框  
  newContext.strokeStyle = 'black';  
  newContext.lineWidth = outerBorderWidth;  
  newContext.strokeRect(outerBorderWidth / 2 +leftPadding, outerBorderWidth / 2 +topPadding, newCanvasWidth - outerBorderWidth- leftPadding*2, newCanvasHeight - outerBorderWidth -topPadding-bottomPadding);  
  
  // 绘制内边框（如果需要的话，可以调整颜色和样式）  
  newContext.strokeStyle = 'black'; // 假设内边框为灰色  
  newContext.lineWidth = innerBorderWidth;  
  newContext.strokeRect(outerBorderWidth / 2 +leftPadding +10, outerBorderWidth / 2 +topPadding+10, newCanvasWidth - outerBorderWidth- leftPadding*2 -20, newCanvasHeight - outerBorderWidth -topPadding-bottomPadding - 20);  
  
  // 计算内边框内部的绘制区域  
  let innerCanvasX = outerBorderWidth + innerPadding + leftPadding;  
  let innerCanvasY = outerBorderWidth + innerPadding + topPadding;  
  let innerCanvasWidth = newCanvasWidth - 2 * (outerBorderWidth + innerPadding);  
  let innerCanvasHeight = newCanvasHeight - 2 * (outerBorderWidth + innerPadding) - topPadding - bottomPadding;  
  
  // 将原始画布内容绘制到新画布的内边框内部  
  newContext.drawImage(originalCanvas, 0, 0, originalWidth, originalHeight, innerCanvasX , innerCanvasY, innerCanvasWidth -40 , innerCanvasHeight);  
  
  // 设置字体和颜色  
  newContext.font = '34px Arial';  
  newContext.textAlign = 'center';
  newContext.fillStyle = 'black';  
  
  // 计算文本绘制的y坐标（相对于外边框的顶部和底部）  
  let titleY = outerBorderWidth + topPadding / 2 +10 ; // 标题的y坐标（相对于外边框顶部）  
  let authorY = newCanvasHeight - outerBorderWidth - bottomPadding / 2 + 10; // 作者文本的y坐标（相对于外边框底部，减去字体高度的一半进行垂直居中）  
  let dateY = authorY; // 日期文本的y坐标与作者文本相同  
  let dateText = new Date().toLocaleString();  
  let xTextStart =newCanvasWidth/2; // 文本开始的x坐标（相对于外边框左侧）  
  
  // 在新画布的上方添加标题  
  let titleText = formdata.title;  
  newContext.fillText(titleText, xTextStart, titleY);  
  
  // 在新画布的下方添加作者和时间  
  newContext.font = '18px Arial';  
  newContext.textAlign = 'left';
  let authorText = "制图单位: " + formdata.unit;  
  newContext.fillText(authorText, 40, authorY);  
  let dateX = newCanvasWidth - outerBorderWidth - rightPadding - newContext.measureText(dateText).width - 80; // 日期文本的x坐标（相对于外边框右侧，减去日期文本宽度和额外间距）  
  newContext.fillText("出图时间: " + dateText, dateX, dateY);  

  
// 导出为图片  
let dataURL = newCanvas.toDataURL('image/png');  
let link = document.createElement('a');  
link.href = dataURL;  
link.download = `${dateText}.png`;  
link.click();
ElMessage({
    message: '出图成功',
    type: 'success',
  })
  handleClose();
}

const handleClose = () => {
  emits('changeFlag')
}
</script>

  <style scoped>
.shower-screen{
  position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding-top: 10vh;
    background-color: #2c2f337a;
    height: 100vh;
    width: 100vw;
    z-index: 2000;
}
.box{
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  padding: 10px;
  height: 100%;

}
.el-input {
  margin-bottom: 10px;
}

</style>